<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/01.css">
    <link rel="stylesheet" href="css/02.css">
    <link rel="stylesheet" href="css/jiaoche.css">
    <link rel="stylesheet" href="css/common.css">
   
    <!-- <link rel="stylesheet" href="css/common.css"> -->
    <script src="js/jquery.min.js"></script>
  
    <script>
            window.onload=function(){
                let headli=$(".header-con li");
        let temp=$(".header-con #temp");
        let tempul=$(".header-con ul")
        let tempcon=$("#temp-con")
        let arr1=["轿车","SUV","轿跑车&敞篷车","MPV","纯电动车","车型筛选"]
        let arr2=["购车新方案","金融服务","在线购车","官方认证二手车","大学生&在线购车"]
        let arr3=["服务指南","保养维修及维护","选装配件","EQ客户服务"]
        let arr4=["设计美学","SUV","动力与效能科技","智能科技","豪华体验与之制造","奔驰制造"]
        let arr5=["品牌天下","品牌互动","客户承诺","企业社会责任","Mercedes me"]
        headli.mouseenter(function(){
            temp.slideDown()
            // temp.animate({
            //     opacity:1,
            // })
        
        if(Number($(this).index()+1)===1){
           tempcon.html("")
            for(var i=0;i<6;i++){
                let span=$(" <span></span>");
             
                span.html(arr1[i]).appendTo(tempcon);
             
                span.click(function(){
                   if($(this).index()===0){
                    location.href="jiaoche.html"
                   }
                   if($(this).index()===1){
                    location.href="list01.html"
                   }
                    
                 
              })
               
            }
         
            
        }
        
        if(Number($(this).index()+1)===2){
           tempcon.html("")
            for(var i=0;i<5;i++){
             
                let span=$(" <span></span>");
                span.html(arr2[i]).appendTo(tempcon);
                span.click(function(){
                   if($(this).index()===2){
                    location.href="gouche.html"
                   }
                    
                 
              })
            }
         
            
        }
        if(Number($(this).index()+1)===3){
           tempcon.html("")
            for(var i=0;i<4;i++){
             
                let span=$(" <span></span>");
                span.html(arr3[i])
                span.appendTo(tempcon)
                
            }
         
            
        }
        if(Number($(this).index()+1)===4){
           tempcon.html("")
            for(var i=0;i<6;i++){
             
                let span=$(" <span></span>");
                span.html(arr4[i])
                span.appendTo(tempcon)
            }
         
            
        }
        if(Number($(this).index()+1)===5){
           tempcon.html("")
            for(var i=0;i<5;i++){
             
                let span=$(" <span></span>");
                span.html(arr5[i])
                span.appendTo(tempcon)
            }
         
            
        }
        
        
        // if($(this).index())
          
        })
        tempul.mouseleave(function(){
          temp.slideUp()
              
            })
            var tit=document.querySelector("header");
            var titop=tit.offsetTop;
            window.onscroll=function(){
                var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
                if(scrolltop>titop){
                    tit.className="fix";
                }
                else{
                    tit.className=""
                }
            }
        
            }
        </script>
            
         
    
    
</head>
<body>
     
    <header id="head">
        <header class="header-con">
            <div class="left">
                <img src="img/logo.png" alt="">
            </div>
            <div class="center">
                <ul>
                    <li>车型</li>
                    <li>购车指南</li>
                    <li>客户服务</li>

                    <li>Mercedes me</li>
                    <li>梅赛德斯-AMG</li>
                    <div id="temp">
                            <div id="temp-con"></div>
    
                        </div>
                </ul>
                
            </div>
            <div class="right">
                <p class="p1"  id="userName" style="color:#fff; width: 110px;
                height: 30px;" >
                fdasnjklsdl
                    <!-- <span id="inforName" style="padding: 20px">
                        <! <a href="zhuce.html" >注册</a> -->
                    <!-- </span> -->
                    <!-- <span style="display: none"> -->
                        <!-- <a href="submit.html">登录</a> -->
                    <!-- </span> --> 

                </p>
                <p class="p2">
                    <span>EQ</span>
                    <span></span>
                </p>
            </div>
        </header>
    </header>
    <main>
        <div id="mainleft">
            <ul>
                <li>轿车</li>
                <li>SUV</li>
                <li>跑车&敞篷跑车</li>
                <li>MPV</li>
                <li>纯电动车</li>
            </ul>
        </div>
        <div id="mainright">
            <div id="r01"></div>
            <div id="r02"></div>
        </div>
    </main>
    <footer id="foot">
            
            <div class="foot-con">

                    <div class="left">
                        <ul class="u1">
                            <li>
                                <a href="#">隐私协议</a>
                            </li>
                            <li>
                                <a href="#">用户协议</a>
                            </li>
                            <li>
                                <a href="#">投诉电话</a>
                            </li>
                            <li>
                                <a href="#">网站地图</a>
                            </li>
                            <li>
                                <a href="#">法律神明</a>
                            </li>
                            <li>
                                <a href="#">环保信息查询</a>
                            </li>
                            <li>
                                <a href="#">供应商平台</a>
                            </li>
                            <li style="padding: 0px">
                                <a href="#">腾势官网</a>
                            </li>
                        </ul>
                        <ul class="u2">
                            <li>©梅赛德斯-奔驰版权所有</li>
                            <li>京ICP备09046804号-2</li>
                            <li>京公网安备 11010502035702号</li>
                        </ul>
                    </div>
                    <div class="right">
                        <ul class="u1">
                            <li class="logo01">官方在线展厅</li>
                            <li class="logo02">官方应用</li>
                            <li class="logo03">官方微信</li>
                            <li class="logo04">天猫官方旗舰店</li>
                            <li class="logo05">官方微博</li>
                            <li class="logo06">官方微博</li>
                        </ul>
    
                    </div>
                </div>
            
        </div>
    </footer>
</body>
</html>
<script>
    $("#head .p1").html(sessionStorage.getItem("userinfor"))
 </script>
<!-- <script src="js/jquery.min.js"></script>
<script src="js/01.js"></script> -->
